import React, { useState } from 'react';
import { Modal, Form, Input } from 'antd';
import { ModalProps } from 'antd/lib/modal';

interface _FormModal extends ModalProps {
    form: any,
    children: any,
    formitems: any[],
};
const FormModal: React.FC<_FormModal> = ({ visible, title, okText, cancelText, onOk, onCancel, width, form, formitems, children }) => {
    
    const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
    }
    function renderFormItems(formitems) {
        if (!formitems || !formitems.length) return null;
        const { getFieldDecorator } = form;
        return formitems.map((item, index) => (
            <Form.Item
                key={`formitem_${index}`}
                {...formItemLayout}
                label={item.label}
            > {
                    getFieldDecorator(item.name, item.config)(<Input type={item.type} placeholder={item.placeholder || ''}/>)}</Form.Item>
        ))
    }
    return (
        <Modal
            visible={visible}
            title={title}
            okText={okText}
            cancelText={cancelText}
            onOk={onOk ? onOk.bind(null, form) : () => { }}
            onCancel={onCancel ? onCancel.bind(null, form) : () => { }}
            width={width}
        >
            <Form layout={'horizontal'}>
                {renderFormItems(formitems)}
                {children}
            </Form>
        </Modal>
    );
}
const WrappedFormModal = Form.create<any>({ name: 'modalForm' })(FormModal);
export default WrappedFormModal;
